<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>WebView显示的网页在大分辨率屏下被放大 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">WebView显示的网页在大分辨率屏下被放大</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">May 22, 2018&nbsp;&nbsp;16:25:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/Android-BUG%E5%A4%84%E7%90%86/">Android-BUG处理</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <p>例如适合800px宽度的页面，如果通过WebView在1024px的屏幕宽度下显示时，内容(图片)会被放大，整体页面会超出屏幕。 </p>
<p>试了将WebView的settings中的缩放都关闭了也不行。</p>
<p>后来发现了WebSettings.ZoomDensity这个设置，并在文档中找到了以下说明： </p>
<p>Enum for specifying the WebView’s desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi </p>
<p>这样就能很好的说明以上问题的原因了，又是密度惹的祸… </p>
<p>默认WebView的ZoomDensity是MEDIUM，对应160dpi。而我之前800px宽度的屏幕对应的是60dpi，1024px宽度的屏幕对应的是240dpi。所以，页面在高分辨率的屏幕上被放大了1.5倍。这个和图片自缩放的机制是一样的。 </p>
<p>于是，只要通过当前屏幕的密度，动态设置该属性就能适应不同屏幕（当然，默认你的页面是针对160dpi的密度大小设计的）,即可解决： </p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">int</span> screenDensity = getResources().getDisplayMetrics().densityDpi ;   </span><br><span class="line">WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;   </span><br><span class="line"><span class="keyword">switch</span> (screenDensity)&#123;   </span><br><span class="line"><span class="keyword">case</span> DisplayMetrics.DENSITY_LOW :  </span><br><span class="line">    zoomDensity = WebSettings.ZoomDensity.CLOSE;  </span><br><span class="line">    <span class="keyword">break</span>;  </span><br><span class="line"><span class="keyword">case</span> DisplayMetrics.DENSITY_MEDIUM:  </span><br><span class="line">    zoomDensity = WebSettings.ZoomDensity.MEDIUM;  </span><br><span class="line">    <span class="keyword">break</span>;  </span><br><span class="line"><span class="keyword">case</span> DisplayMetrics.DENSITY_HIGH:  </span><br><span class="line">    zoomDensity = WebSettings.ZoomDensity.FAR;  </span><br><span class="line">    <span class="keyword">break</span> ;  </span><br><span class="line">&#125;  </span><br><span class="line">webSettings.setDefaultZoom(zoomDensity);</span><br></pre></td></tr></table></figure>
        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2018/05/22/WebView%E6%98%BE%E7%A4%BA%E7%9A%84%E7%BD%91%E9%A1%B5%E5%9C%A8%E5%A4%A7%E5%88%86%E8%BE%A8%E7%8E%87%E5%B1%8F%E4%B8%8B%E8%A2%AB%E6%94%BE%E5%A4%A7/">https://zhangpingv5.gitee.io/2018/05/22/WebView%E6%98%BE%E7%A4%BA%E7%9A%84%E7%BD%91%E9%A1%B5%E5%9C%A8%E5%A4%A7%E5%88%86%E8%BE%A8%E7%8E%87%E5%B1%8F%E4%B8%8B%E8%A2%AB%E6%94%BE%E5%A4%A7/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/WebView/"># WebView</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2018/10/11/JMeter%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/">JMeter使用教程</a>
            
            
            <a class="next" rel="next" href="/2018/02/11/GIT--%E6%89%93%E6%A0%87%E7%AD%BE/">GIT--打标签</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
